<template>
	<view>
		<view class="top flex align-center justify-center">
			<view class="top-btn flex align-center justify-between">
				<view @click="check(0)" :class="select==0?'action':''">一级分销商</view>
				<view @click="check(2)":class="select==2?'action':''">二级分销商</view>
			</view>
			<text @click="show" class="rli">日历</text>
		</view>
		<nyn-city-list v-if="select==0" :hot="false" @bindCity="bindCity"></nyn-city-list>
		<view v-if="select==2">
			<nyn-city-list :hot="true" @bindCity="bindCity"></nyn-city-list>
		</view>
		 <view v-if="isShow" class="calendar">
			 <uni-calendar
			    :insert="true"
			    :lunar="true" 
			    :start-date="'2019-3-2'"
			    :end-date="'2019-5-20'"
			    @change="change"
			     />
				 <view @click="close" class="close">关闭</view>
		 </view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import nynCityList from "../../components/nyn-city-list/nyn-city-list.vue";
	export default {
		components: {
			nynCityList,
			uniCalendar
		},
		data() {
			return {
				distributorList: [],
				distributorCount:0,
				distributorListLevel:[],
				distributorLevelCount:0,
				isShow:false,
				select:0,

			};
		},
		onLoad(opt) {
			if(opt.key){
				this.select = opt.key
			}
		},
		methods: {
			//点击城市时触发,event = {id,name,spell}
			bindCity:function(event){
			    console.log(event)
			},
			show:function(){
				this.isShow=true
			},
			close:function(){
				this.isShow=false
				uni.navigateTo({
					url:'/pages/personList/personList?key='+this.select
				})
			},
			check:function(ind){
				this.select=ind
				console.log('check:'+ind)
			},
			change:function(e){
				console.log('personlist change:'+JSON.stringify(e))
				console.log(e.fulldate)
				console.log(e.year+'-'+e.month)
				uni.setStorageSync('yearAndMonth',e.year+'-'+e.month)
				uni.setStorageSync('month',e.month)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.close{
		text-align: center;
		line-height: 140upx;
		font-size: 40upx;
	}
	.calendar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: #fff;
		z-index: 999;
	}
	.top-btn>view{
	
		width: 170upx;
			height: 56upx;
			text-align: center;
			line-height: 56upx;
			color: #fff;
	}
	.action{
		color: #000 !important;
		width: 170upx;
			height: 56upx;
			background-color: #ffffff;
			border-radius: 28upx;
			border: solid 1upx #dddddd;
			text-align: center;
			line-height: 56upx;
	}
	.top-btn{
		width: 340upx;
			height: 56upx;
			background-color: $btn-bground;
			border-radius: 28upx;
			border: solid 1upx #ffffff;
	}
	.rli{
		position: absolute;
		right: 20upx;
		color: #fff;
	}
	.top{
		position: relative;
		width: 100%;
			height: 88upx;
			background-color: $btn-bground;
	}
</style>
